<template>
    <div>
        <!-- <h1>这个路由被用于在登录成功后展示数据（目前显示的数据是——用户名：{{userStore.username}}）</h1> -->
        <!-- <h1>这个路由被用于在登录成功后展示数据</h1> -->
        <el-card>
            <div class="box">
                <img :src="userStore.avatar" alt="图片地址已失效" class="avatar"/>
                <div class="aDivLocatedAtTheRightSideOfTheImage">
                    <h3 class="title">{{aFunctionThatUsedToDetermineWhichTimePeriodItIsCurrentlyInByGettingTime()}}，{{ userStore.username }}</h3>
                    <!-- <p class="subtitle">硅谷甄选运营平台</p> -->
                    <p class="subtitle">{{settings.title}}</p>
                </div>
            </div>
        </el-card>
        <!-- 通过使用全局组件“svg-icon”并传递属性来显示图片↓ -->
         <div class="aDivElementInCludeSvgImage">
             <svg-icon name="welcome" width="500px" height="500px"></svg-icon>
         </div>
    </div>
</template>
<script setup lang="ts">
// 注：由于在“组件挂载完毕”时就需要立即通过仓库中的方法来向服务器发送请求（以获取用户信息），所以需要在此处导入“vue”的“生命周期钩子函数”中的“onMounted”↓
// import { onMounted } from 'vue'
// 导入仓库↓
import useUserStore from '@/store/modules/user'
import {aFunctionThatUsedToDetermineWhichTimePeriodItIsCurrentlyInByGettingTime} from '@/utils/time'
import settings from '@/setting'
// 获取该仓库中的数据并创建仓库实例对象↓
let userStore = useUserStore()
// onMounted(() => {
    // 在此处调用仓库中的方法来向服务器发送请求↓
    // userStore.getUserInfomation()
// })
</script>
<style scoped lang="scss">
.box {
    display: flex;
    .avatar {
        width: 100px;
        height: 100px;
        border-radius: 50%;
    }
    .aDivLocatedAtTheRightSideOfTheImage {
        margin-left: 20px;
        .title {
            font-size: 30px;
            font-weight: bold;
            margin-bottom:40px;
        }
        .subtitle {
            font-style: italic; // 使用斜体字
            font-size: 16px;
            color: #999;
        }
    }
}
.aDivElementInCludeSvgImage {
    display: flex;
    justify-content: center;
    align-items: center;
}
</style>